<template>
    <div id="container" v-loading.lock="currentLoading" element-loading-text="数据加载中"></div>
</template>

<script>
import { TMap } from '../../utils/tmap'
export default {
  data () {
    return {
      currentLoading: true,
      zoomLevel: 3
    }
  },
  methods: {
    initMap: function (data) {
      let that = this
      TMap('BH3BZ-OWLW6-6KNSQ-MHGH5-ABJHZ-4KFW6').then(qq => {
        that.currentLoading = false
        let center = new qq.maps.LatLng(data.lat, data.lng)
        /* eslint-disable no-new */
        let map = new qq.maps.Map(document.getElementById('container'), {
          // 地图的中心地理坐标。
          center: center,
          zoom: parseInt(data.zoom)
        })
        // 创建标记
        let marker = new qq.maps.Marker({
          position: center,
          draggable: true,
          map: map
        })
        // 添加到提示窗
        // let info = new qq.maps.InfoWindow({
        // map: map
        // })
        // 获取标记的点击事件
        qq.maps.event.addListener(marker, 'dragend', function () {
          console.log(marker)
          that.$confirm('是否移动到当前位置?', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
          }).then(() => {
            that.setDefaultMap(marker.getPosition())
            // console.log(center)
            // let geocoder = new qq.maps.Geocoder({complete: function (result) {
            //   console.log(result.detail.address)
            // }})
            // geocoder.getAddress(new qq.maps.LatLng(center.lat, center.lng))
          }).catch(() => {
            marker.setPosition(center)
          })
        })
        // 获取地图缩放级别
        qq.maps.event.addListener(map, 'zoom_changed', function () {
          that.zoomLevel = map.getZoom()
        })
      })
    },
    loadData: function () {
      let that = this
      this.$axios.get(this.APIURL + '/setting/defaultMap').then(function (response) {
        if (response !== false) {
          that.zoomLevel = response.data.zoom
          that.initMap(response.data)
        }
      })
    },
    setDefaultMap: function (latlng) {
      let that = this
      this.$axios.get(this.APIURL + '/setting/setDefaultMap', {params: {lat: latlng.lat, lng: latlng.lng, zoomLevel: that.zoomLevel}}).then(function (response) {
        if (response !== false) {
          that.$message({type: 'success', message: '设置成功!'})
        }
      })
    }
  },
  computed: {
  },
  mounted: function () {
    // this.currentLoading = true
    // this.initMap()
    this.loadData()
    // this.imgwidth = {width: window.innerWidth + 'px'}
  }
}
</script>
